<template>
  <div class="haloe-page__jump">
    跳至<input v-model="_current">页
    <e-button
      :size="isSmall ? 'small':'default'"
      @click.stop="changePage">GO</e-button>
  </div>
</template>

<script setup>
import { ref, defineProps,defineEmits,toRefs,watch,computed } from 'vue'
import eButton from "../button"
import { oneOf } from '../../utils/assist';


const props = defineProps({
  current: {
    type:Number
  },
  allPages:{
    type:Number
  },
  isSmall: {
    type:Boolean,
    default:false
  },
  size: { // 是否精简版
    validator (value) {
      return oneOf(value, ['small']);
    }
  },
})

const emits = defineEmits(['on-page'])

const {current,allPages,size} = toRefs(props)

let _current = ref(current.value)

watch(current,(value)=>{
  _current.value = value
})

const isSmall = computed(()=>{
  return !!size.value
})


/**
 * 跳转事件
 * @param {*} event
 */
function changePage () {
  let val = String(_current.value).trim();
  let page = 0;
  if (isValueNumber(val)) {
    val = Number(val);
    if (val != current.value) {
      if (val > allPages.value) {
        page = allPages.value;
      } else {
        page = val;
      }
    }
  } else {
    page = 1;
  }
  if (page) {
    emits('on-page', page);
  }
}

/**
 * 判断是否是数字类型
 * @param {*} value
 */
function isValueNumber (value) {
  return (/^[1-9][0-9]*$/).test(value + '');
}


</script>

<style scoped>

</style>
